<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>MJUI-前端框架</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="../themes/bootstrap/cetc54.ui.all.css" />
    <link rel="stylesheet" type="text/css" href="../lib/zTree_v3/css/zTreeStyle/zTreeStyle.css" />
    <link rel="stylesheet" type="text/css" href="default.css" />
    <link type="image/x-icon" href="images/logo.ico" rel="icon" />
</head>
<body>
<div id="layout" ui-config="autoFit:true" style="width: 600px;height: 600px">
    <div ui-config="region:'top',showHeader:false,split:false,height:40,border:false">
        <div class="header">
            <div class="header_logo">
            </div>
            <div class="header_title">MJUI</div>
            <div class="fullscreen" title="快捷键:F11"><div id="aFullScreen" href="javascript:void(0);">全屏</div></div>
        </div>
    </div>
	
    <div ui-config="region:'left',icon:'menu',title:'导航栏',split:true,width:220,minWidth:50,maxWidth:400">
        <div id="menu" ui-config="autoFit:true,border:false">
            <div title="典型应用场景示例" ui-config="icon:'list',title:'典型应用场景示例'">
                <ul id="appDemo" class="ztree"></ul>
            </div>
            <div title="组件示例" ui-config="icon:'list',title:'组件示例'">
                <ul id="componentDemo" class="ztree"></ul>
            </div>
            <div title="组件API" ui-config="icon:'list',title:'组件API'">
                <ul id="componentAPI" class="ztree"></ul>
            </div>
            <div title="组件API" ui-config="icon:'list',title:'组件定制'">
                <ul id="componentPlugin" class="ztree"></ul>
            </div>
        </div>
    </div>
    <div ui-config="region:'center',icon:'application_view_columns',showHeader:false,border:false">
        <div id="tabs" ui-config="autoFit:true,tabWidth:95,enableContextMenu:true">
            <div ui-config="id:'main',icon:'home',title:'首页',url:'appInfo.html'">
            </div>
        </div>
    </div>
    <div ui-config="region:'bottom',showHeader:false,split:false,height:26,border:false">
        <div class="default_bottom">Copyright © 2014-2017 MJUI</div>
    </div>
</div>
</body>
<script type="text/javascript" src="../lib/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="../release/cetc54.ui.all.js"></script>
<script type="text/javascript" src="../lib/zTree_v3/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="../lib/zTree_v3/js/jquery.ztree.exhide.js"></script>
<script>
    var c_Nodes = [
        { id: 1000, pId: 0, name: "快速入门(未完成)", open: false, icon: 'componentIcon/core.png',isHidden:true},
        { id: 10001, pId: 1000, name: "组件语法", href: '../example/core/base.html'},
        { id: 10002, pId: 1000, name: "通用函数", href: '../example/core/base.html'},
        { id: 10003, pId: 1000, name: "修改组件默认配置", href: '../example/core/base.html'},
        { id: 10004, pId: 1000, name: "更改组件风格", href: '../example/core/base.html'},

        { id: 22, pId: 0, name: "字体图标", open: false, icon: 'componentIcon/font.png'},
        { id: 221, pId: 22, name: "奥森字体图标", href: '../example/fonts/fontAwesome.html'},

        { id: 23, pId: 0, name: "hcharts(国外)-图表", open: false, icon: 'componentIcon/hcharts.png',href: '../lib/hcharts/index.htm'},

        { id: 24, pId: 0, name: "echarts（百度)-图表", open: false, icon: 'componentIcon/echarts.png', href: '../lib/echarts/index.html'},

        { id: 1, pId: 0, name: "按钮-button", open: false, icon: 'componentIcon/button.png'},
        { id: 11, pId: 1, name: "button-基本用法", href: '../example/button/base.html'},
        { id: 12, pId: 1, name: "button-带字体图标", href: '../example/button/withFontIcon.html'},

        { id: 2, pId: 0, name: "按钮组-buttonbar", open: false, icon: 'componentIcon/buttonbar.png'},
        { id: 21, pId: 2, name: "buttonbar-基本用法", href: '../example/buttonbar/base.html'},

        { id: 3, pId: 0, name: "遮罩-mask", open: false, icon: 'componentIcon/mask.png'},
        { id: 31, pId: 3, name: "mask-基本用法", href: '../example/mask/base.html'},

        { id: 4, pId: 0, name: "加载遮罩-loading", open: false, icon: 'componentIcon/loading.png'},
        { id: 41, pId: 4, name: "loading-基本用法", href: '../example/loading/base.html'},

        { id: 5, pId: 0, name: "菜单-menu", open: false, icon: 'componentIcon/menu.png'},
        { id: 51, pId: 5, name: "menu-基本用法", href: '../example/menu/base.html'},
        { id: 52, pId: 5, name: "menu-加载本地数据", href: '../example/menu/localJson.html'},
        { id: 53, pId: 5, name: "menu-加载远程数据", href: '../example/menu/remoteJson.html'},
        { id: 54, pId: 5, name: "menu-右键菜单", href: '../example/menu/rightKey.html'},
        { id: 55, pId: 5, name: "menu-选择事件", href: '../example/menu/selectEvent.html'},
        { id: 56, pId: 5, name: "menu-带字体图标", href: '../example/menu/withFontIcon.html'},

        { id: 6, pId: 0, name: "面板-panel", open: false, icon: 'componentIcon/panel.png'},
        { id: 61, pId: 6, name: "panel-基本用法", href: '../example/panel/base.html'},
        { id: 69, pId: 6, name: "panel-百分比显示", href: '../example/panel/percent.html'},
        { id: 62, pId: 6, name: "panel-加载静态页面", href: '../example/panel/loadPage.html'},
        { id: 63, pId: 6, name: "panel-带操作面板", href: '../example/panel/buttonbar.html'},
        { id: 64, pId: 6, name: "panel-拖动&大小", href: '../example/panel/drag_resize.html'},
        { id: 65, pId: 6, name: "panel-Iframe", href: '../example/panel/iniframe.html'},
        { id: 66, pId: 6, name: "panel-带工具条", href: '../example/panel/toolbar.html'},
        { id: 67, pId: 6, name: "panel-可折叠", href: '../example/panel/coll.html'},
        { id: 68, pId: 6, name: "panel-带字体图标", href: '../example/panel/withFontIcon.html'},

        { id: 7, pId: 0, name: "消息框-Messagetip", open: false, icon: 'componentIcon/messagetip.png'},
        { id: 71, pId: 7, name: "Messagetip-基本用法", href: '../example/Messagetip/base.html'},
        { id: 72, pId: 7, name: "Messagetip-容器中", href: '../example/Messagetip/container.html'},
        { id: 73, pId: 7, name: "Messagetip-带Iframe", href: '../example/Messagetip/iframe.html'},
        { id: 74, pId: 7, name: "Messagetip-不带标题", href: '../example/Messagetip/noheader.html'},

        { id: 8, pId: 0, name: "提示框-Messagebox", open: false, icon: 'componentIcon/messagebox.png'},
        { id: 81, pId: 8, name: "Messagebox-基本用法", href: '../example/Messagebox/base.html'},

        { id: 9, pId: 0, name: "弹出窗口-dialog", open: false, icon: 'componentIcon/dialog.png'},
        { id: 91, pId: 9, name: "dialog-基本用法", href: '../example/dialog/base.html'},
        { id: 92, pId: 9, name: "dialog-带操作", href: '../example/dialog/buttonbar.html'},

        { id: 10, pId: 0, name: "分页-pagination", open: false, icon: 'componentIcon/pagination.png'},
        { id: 101, pId: 10, name: "pagination-基本用法", href: '../example/pagination/base.html'},

        { id: 11, pId: 0, name: "表格-grid", open: false, icon: 'componentIcon/grid.png'},
        { id: 111, pId: 11, name: "grid-基本用法", href: '../example/grid/base.html'},
        { id: 112, pId: 11, name: "grid-异步数据", href: '../example/grid/ajax.html'},
        { id: 113, pId: 11, name: "grid-带复选框", href: '../example/grid/checkbox.html'},
        { id: 114, pId: 11, name: "grid-复杂表头", href: '../example/grid/complexHeader.html'},
        { id: 115, pId: 11, name: "grid-分页", href: '../example/grid/pagination.html'},
        { id: 116, pId: 11, name: "grid-带工具条", href: '../example/grid/toolbar.html'},

        { id: 12, pId: 0, name: "提示-tooltip", open: false, icon: 'componentIcon/tooltip.png'},
        { id: 121, pId: 12, name: "tooltip-基本用法", href: '../example/tooltip/base.html'},
        { id: 122, pId: 12, name: "tooltip-异步数据", href: '../example/tooltip/ajax.html'},

        { id: 13, pId: 0, name: "页面框架-layout", open: false, icon: 'componentIcon/layout.png'},
        { id: 131, pId: 13, name: "layout-基本用法", href: '../example/layout/base.html'},

        { id: 14, pId: 0, name: "标签页-tabs", open: false, icon: 'componentIcon/tabs.png'},
        { id: 141, pId: 14, name: "tabs-基本用法", href: '../example/tabs/base.html'},
        { id: 142, pId: 14, name: "tabs-标签位置", href: '../example/tabs/tabPosition.html'},

        { id: 15, pId: 0, name: "手风琴-accordion", open: false, icon: 'componentIcon/accordion.png'},
        { id: 151, pId: 15, name: "accordion-基本用法", href: '../example/accordion/base.html'},
        { id: 152, pId: 15, name: "accordion-全部折叠", href: '../example/accordion/multiple.html'},

        { id: 16, pId: 0, name: "标签类-label", open: false, icon: 'componentIcon/label.png'},
        { id: 161, pId: 16, name: "label-基本用法", href: '../example/label/base.html'},

        { id: 21, pId: 0, name: "步骤向导-wizard", open: false, icon: 'componentIcon/wizard.png'},
        { id: 211, pId: 21, name: "wizard-基本用法", href: '../example/wizard/base.html'},

        { id: 17, pId: 0, name: "表单相关", open: false},
        { id: 171, pId: 17, name: "数字输入-numberbox", href: '../example/numberbox/base.html', icon: 'componentIcon/numberbox.png'},
        { id: 172, pId: 17, name: "日期输入-date", href: '../example/date/base.html', icon: 'componentIcon/date.png'},
        { id: 173, pId: 17, name: "表单验证-validate", href: '../example/validate/base.html', icon: 'componentIcon/validate.png'},
        { id: 174, pId: 17, name: "表单-form", href: '../example/form/templete.html', icon: 'componentIcon/form.png'},
        { id: 175, pId: 17, name: "下拉框-combo", href: '../example/combo/base.html', icon: 'componentIcon/combo.png'},
        { id: 176, pId: 17, name: "下拉菜单-combobox", href: '../example/combobox/base.html', icon: 'componentIcon/combobox.png'},
        { id: 178, pId: 17, name: "combobox-带添加按钮", href: '../example/combobox/withAdd.html', icon: 'componentIcon/combobox.png'},
        { id: 177, pId: 17, name: "搜索框-searchbox", href: '../example/searchbox/base.html', icon: 'componentIcon/searchbox.png'},
        { id: 179, pId: 17, name: "复选框-checkbox", href: '../example/checkbox/base.html', icon: 'componentIcon/searchbox.png'},

        { id: 18, pId: 0, name: "office插件-officeControl", open: false, icon: 'componentIcon/office.png'},
        { id: 181, pId: 18, name: "officeControl-基本用法", href: '../example/ntkoOffice/base.html'},

        { id: 19, pId: 0, name: "富文本编辑器插件-ueditor", open: false, icon: 'componentIcon/ueditor.png'},
        { id: 191, pId: 19, name: "ueditor-基本用法", href: '../example/ueditor/base.html'},

        { id: 20, pId: 0, name: "树状列表-tree(集成zree)", open: false, icon: 'componentIcon/tree.png'},
        { id: 201, pId: 20, name: "tree-用法", href: '../lib/zTree_v3/demo/cn/index.html'}
    ];
    var a_Nodes=[
        { id: 10000, pId: 0, name: "数据列表",open:true},
        { id: 100001, pId: 10000, name: "经典完整示例",href:'../demo/nlist/list.html'},
        { id: 100002, pId: 10000, name: "带高级查询(枚举)",href:'../demo/alist/list.html'},
        { id: 100003, pId: 10000, name: "带高级查询(自定义)",href:'../demo/alist/list.html',isHidden:true},
        { id: 100004, pId: 10000, name: "主从数据列表（左-右）",href:'../demo/nlist/list.html',isHidden:true},
        { id: 100005, pId: 10000, name: "主从数据列表（上-下）",href:'../demo/nlist/list.html',isHidden:true},
        { id: 100006, pId: 10000, name: "主从数据列表（左-右[上-下])",href:'../demo/nlist/list.html',isHidden:true},

        { id: 10001, pId: 0, name: "表单",open:true},
        { id: 100011, pId: 10001, name: "经典表单结构",href:'../demo/nlist/list.html',isHidden:true},
        { id: 100012, pId: 10001, name: "表单布局（table布局）",href:'../demo/nlist/list.html',isHidden:true},
        { id: 100013, pId: 10001, name: "分步骤表单",href:'../demo/sform/base.html'}
    ];
    var d_Nodes=[
        { id: 100000, pId: 0, name: "组件API",open:true},
        { id: 1000001, pId: 100000, name: "uiButton",href:'../doc/uiButton.html', icon: 'componentIcon/button.png'},
        { id: 1000002, pId: 100000, name: "uiButtonBar",href:'../doc/uiButtonBar.html', icon: 'componentIcon/buttonbar.png'},
        { id: 1000003, pId: 100000, name: "uiCombo",href:'../doc/uiCombo.html', icon: 'componentIcon/combo.png'},
        { id: 10000025, pId: 100000, name: "uiCombobox",href:'../doc/uiCombobox.html', icon: 'componentIcon/combobox.png'},
        { id: 1000004, pId: 100000, name: "uiCore",href:'../doc/uiCore.html', icon: 'componentIcon/button.png'},
        { id: 1000005, pId: 100000, name: "uiDate",href:'../doc/uiDate.html', icon: 'componentIcon/date.png'},
        { id: 1000006, pId: 100000, name: "uiDialog",href:'../doc/uiDialog.html', icon: 'componentIcon/dialog.png'},
        { id: 1000007, pId: 100000, name: "uiForm",href:'../doc/uiForm.html', icon: 'componentIcon/form.png'},
        { id: 1000008, pId: 100000, name: "uiGrid",href:'../doc/uiGrid.html', icon: 'componentIcon/grid.png'},
        { id: 1000009, pId: 100000, name: "uiLayout",href:'../doc/uiLayout.html', icon: 'componentIcon/layout.png'},
        { id: 10000010, pId: 100000, name: "uiLoading",href:'../doc/uiLoading.html', icon: 'componentIcon/loading.png'},
        { id: 10000011, pId: 100000, name: "uiMask",href:'../doc/uiMask.html', icon: 'componentIcon/mask.png'},
        { id: 10000012, pId: 100000, name: "uiMenu",href:'../doc/uiMenu.html', icon: 'componentIcon/menu.png'},
        { id: 10000013, pId: 100000, name: "uiMessagebox",href:'../doc/uiMessagebox.html', icon: 'componentIcon/messagebox.png'},
        { id: 10000014, pId: 100000, name: "uiMessagetip",href:'../doc/uiMessagetip.html', icon: 'componentIcon/messagetip.png'},
        { id: 10000015, pId: 100000, name: "uiNumberbox",href:'../doc/uiNumberbox.html', icon: 'componentIcon/numberbox.png'},
        { id: 10000016, pId: 100000, name: "uiOfficeControl",href:'../doc/uiOfficeControl.html', icon: 'componentIcon/office.png'},
        { id: 10000017, pId: 100000, name: "uiPagination",href:'../doc/uiPagination.html', icon: 'componentIcon/pagination.png'},
        { id: 10000018, pId: 100000, name: "uiPanel",href:'../doc/uiPanel.html', icon: 'componentIcon/panel.png'},
        { id: 10000019, pId: 100000, name: "uiPosition",href:'../doc/uiPosition.html', icon: 'componentIcon/position.png'},
        { id: 10000020, pId: 100000, name: "uiTabs",href:'../doc/uiTabs.html', icon: 'componentIcon/tabs.png'},
        { id: 10000021, pId: 100000, name: "uiTooltip",href:'../doc/uiTooltip.html', icon: 'componentIcon/tooltip.png'},
        { id: 10000022, pId: 100000, name: "uiUEditor",href:'../doc/uiUEditor.html', icon: 'componentIcon/ueditor.png'},
        { id: 10000023, pId: 100000, name: "uiValidate",href:'../doc/uiValidate.html', icon: 'componentIcon/validate.png'},
        { id: 10000024, pId: 100000, name: "uiWizard",href:'../doc/uiWizard.html', icon: 'componentIcon/wizard.png'},

        { id: 100001, pId: 0, name: "集成的第三方插件API",open:true},
        { id: 1000011, pId: 100001, name: "zTree",href:'../lib/zTree_v3/api/API_cn.html',icon: 'componentIcon/tree.png'},
        { id: 1000012, pId: 100001, name: "ueditor",href:'../lib/ueditor/api/index.htm',icon: 'componentIcon/ueditor.png'},
        { id: 1000013, pId: 100001, name: "office控件",open:true,icon: 'componentIcon/office.png'},
        { id: 1000014, pId: 1000013, name: "api",href:'../lib/ntko/NTKO_OFFICEAPIV5021.htm'},
        { id: 1000015, pId: 1000013, name: "js编程教程",href:'../lib/ntko/NTKO OFFICE_JavaScript.htm'}
    ];
    var p_Nodes=[
        { id: 10000, pId: 0, name: "常用工具",open:true},
        { id: 100001, pId: 10000, name: "Unicode与GB中文的转换",href:'../example/gbtounicode/index.html'},

        { id: 10001, pId: 0, name: "定制",open:true},
    ];
    $(function () {
        $('#layout').uiLayout();
        $('#menu').uiAccordion();
        var tabs = $('#tabs').uiTabs({
            tabWidth:'auto'
        });
        $('#aFullScreen').click(function () {
            var t=$(this);
            if ($.uiFullScreen.supportsFullScreen) {
                if ($.uiFullScreen.isFullScreen()) {
                    $.uiFullScreen.cancelFullScreen();
                } else {
                    $.uiFullScreen.requestFullScreen();
                }
            } else {
                var msg="当前浏览器不支持全屏 API，请更换至最新的 Chrome/Firefox/Safari 浏览器或通过 F11 快捷键进行操作。";
                $.uiMessagetip.show({
                    animate: true,
                    width:400,
                    height: 80,
                    title: '消息提示',
                    content: msg,
                    vertical: 'top',
                    horizontal: 'center',
                    timeout: 3500
                });
            }
        });
        var tree_setting = {
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                beforeClick: function (treeId, treeNode, clickFlag) {
                    if (treeNode.href == undefined) {
                        return false;
                    }
                },
                onClick: function (event, treeId, treeNode, clickFlag) {
                    tabs.uiTabs('add', {
                        id: 'tabs-' + treeNode.id,
                        icon: 'list',
                        title: treeNode.name,
                        iniframe: true,
                        url: treeNode.href,
                        closable: true,
                        collapsible: false
                    });
                }
            }
        };
        $.fn.zTree.init($("#componentDemo"), tree_setting, c_Nodes);
        $.fn.zTree.init($("#appDemo"), tree_setting, a_Nodes);
        $.fn.zTree.init($("#componentAPI"), tree_setting, d_Nodes);
        $.fn.zTree.init($("#componentPlugin"), tree_setting, p_Nodes);
    });
</script>
</html>